<!--
 作者：ex_wangshuai
 日期：2016-11-14
 功能：掌大局浏览翻页组件
 参数：mkey->当前页面的标记
 事件：
-->
<template>
  <div class="toolbar bg-black">
    <div class="btnPage">
      <div class="btn-previous" @click="btnPrevious">
        <img :src="imgLeft" alt="">
      </div>
      <div class="btn-next" @click="btnNext">
        <img :src="imgRight" alt="">
      </div>
    </div>
  </div>
</template>

<script>
  export default {
    props: ['mkey', 'pageId'],
    data () {
      var data = {}
      data.key = []
      data.peerKey = []
      data.imgLeft = './static/img/indus/left.png'
      data.imgRight = './static/img/indus/right.png'
      data.preKey = ''
      data.nextKey = ''
      return data
    },
    methods: {
      btnPrevious: function () {
        var mkey = this.mkey
        if (!this.key) return
        if (this.pageId === 'industry') {
          for (var i = 0; i < this.key.length; i++) {
            if (this.key[i] === mkey) {
              if (i === 0) {
                return
              } else {
                this.$route.router.go('/industry/' + this.key[i - 1])
              }
            }
          }
        } else {
          for (var j = 0; j < this.peerKey.length; j++) {
            if (this.peerKey[j] === mkey) {
              if (j === 0) {
                return
              } else {
                this.$route.router.go('/peer/' + this.peerKey[j - 1] + '?key=' + this.peerKey[j - 1])
              }
            }
          }
        }
      },
      btnNext: function () {
        var mkey = this.mkey
        if (!this.key) return
        if (this.pageId === 'industry') {
          for (var i = 0; i < this.key.length; i++) {
            if (this.key[i] === mkey) {
              if (i === this.key.length - 1) {
                return
              } else {
                this.$route.router.go('/industry/' + this.key[i + 1])
              }
            }
          }
        } else {
          for (var j = 0; j < this.peerKey.length; j++) {
            if (this.peerKey[j] === mkey) {
              if (j === this.peerKey.length - 1) {
                return
              } else {
                this.$route.router.go('/peer/' + this.peerKey[j + 1] + '?key=' + this.peerKey[j + 1])
              }
            }
          }
        }
      }
    },
    created () {
    },
    ready: function () {
      this.key = JSON.parse(window.sessionStorage.getItem('mkeyAll'))
      this.peerKey = JSON.parse(window.sessionStorage.getItem('peerMkeyAll'))
      var dom1 = document.getElementsByClassName('btn-previous')[0]
      var dom2 = document.getElementsByClassName('btn-next')[0]
      if (this.key && this.peerKey) {
        if (this.key[0] === this.mkey || this.peerKey[0] === this.mkey) {
          dom1.classList.add('imgNoC')
        }
        if (this.key[this.key.length - 1] === this.mkey || this.peerKey[this.peerKey.length - 1] === this.mkey) {
          dom2.classList.add('imgNoC')
        }
      }
    }
  }
</script>

<style lang="scss" scoped>
  .btnPage {
    position: fixed;
    top: 45%;
    left: 0;
    height: 0;
    width: 100%;
    z-index: 200;
  }

  .btn-previous {
    position: relative;
    left: 0px;
    width: 0.8rem;
    height: 1.6rem;
    float: left;
    transition: all 1s;
  }

  .btn-next {
    position: relative;
    right: 0px;
    width: 0.8rem;
    height: 1.6rem;
    float: right;
    transition: all 1s;
  }

  .imgNoC img {
    filter: grayscale(1);
    -webkit-filter: grayscale(1);
  }
</style>
